<template>
  <div class="main-content">
    <div style="background-color: rgba(180,180,238,0.07);">
      <!--      1 文字部分-->
      <div style="margin-bottom: 60px">
        <div style="text-align: center;margin:0 auto;position: relative;">
          <img src="@/assets/activitybanner.jpg" alt="" style="width: 100%;height: 500px">
        </div>
      </div>
    </div>
    <div style="width: 80%; margin: 0 auto;">
      <div class="main-line-1">
        <div class="main-img-text-line">
          <div class="img-text-line-activity" v-for="obj in activityData" >
            <img :src="obj.img" alt="" style="height: 100%;width: 280px;margin-right: 20px">
            <div class="img-text-line-right">
              <div class="img-text-line-title overflowShow xuan-fu" >{{obj.title}} </div>
              <div class="img-text-line-subtitle multi-overflowShow" style="font-size: 12px"><span style="margin-right: 10px;color: #8a8cb2;">发布时间</span>{{obj.time}}</div>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div class="overflowShow" style="margin-bottom: 10px;font-size: 14px;color: #a3a4a5" >
                <el-button size="medium" type="warning" style="background-color:#8a8cb2;border-color:#8a8cb2" v-if="user.role === 2" @click="book(obj)">预约</el-button>
              </div>
            </div>
          </div>
        </div>
        <!--分页样式-->
        <div class="block" style="text-align: right;margin-top: 20px">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="5"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--      网站介绍-->
    <div style="text-align: center;margin:50px auto" >
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">欢迎来到我们博物馆参观预约官网，这里提供快捷的参观活动申请功能，同时你还可以在本网站浏览博物资讯。 </div>
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">在这里，您可以轻松地浏览各种博物馆动态，在线快捷参与博物馆活动。</div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {

  data() {
    return {
      user: JSON.parse(localStorage.getItem("user") || {}),
      activityData: [],
      pageNum: 1,
      total: 0,
      search:{},
      form:{},
      input:''
    }
  },
  // 监听路由
  watch: {
    $route(to, from) {
      if(to.path === '/front/index') {
        location.reload()
      }
    }
  },
  mounted() {
    this.loadActivity()

  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadActivity();
    },

    // 分页加载表格数据
    loadActivity() {
      request.post("/activity/page?pageNum=" + this.pageNum, this.search).then(res => {
        if (res.code === '0') {
          this.activityData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },

    book(row){
      this.form.activityId = row.id;
      this.form.userId = this.user.id;
      this.form.role = this.user.role;
      this.form.userName = this.user.userName;
      request.post("/record", this.form).then(res => { //post请求把form对象传到后端，后端写逻辑把form存到数据库里
        if (res.code === '0') { //如果接口调用成功，则把模态框关闭，重新加载一下数据库的数据
          this.$notify.success("预约成功");
          this.dialogVisible = false;
          this.loadActivity();
        } else {
          this.$notify.error(res.msg); // 如果不成功，返回报错信息
        }
      })
    },

    searchActivity() {
      let input = this.input || this.$route.query.input
      if (!input){
        // 如果输入框不为空，则展示所有数据
        this.loadActivity();
      } else {
        // 如果表格为空，则展示按照标题模糊搜索后的分页数据
        this.search.title = input
        this.loadActivity();
      }
    },


  }
}
</script>